<template>
  <view>
    <!-- 搜索组件 -->
    <my-search @click="search"></my-search>
    <view class="scroll-container">
      <!-- 左侧滚动区 -->
      <scroll-view class="left-scroll" scroll-y :style="{height: `${windowHeight}px;`}">
        <view
          class="left-item"
          v-for="(item, index) in leftCateList"
          :key="index"
          :class="{ active: index === activeIndex }"
          @click="leftItemClick(index)"
        >
          {{ item.firstTitle }}
        </view>
      </scroll-view>
      <!-- 右侧滚动区 -->
      <scroll-view class="right-scroll" scroll-y :style="{height: `${windowHeight}px;`}" :scroll-top='scrollTop'>
        <view class="cate-lv2" v-for="(item, index) in secondCateList" :key="index">
          <view class="cate-lv2-title">/ {{ item.secondTitle }} /</view>
          <view class="cate-lv2-list">
            <view
              class="cate-lv2-item"
              v-for="(item3, i3) in item.children"
              :key="i3"
              @click="gotoGoodsList(item3)"
            >
              {{ item3.thirdTitle }}
            </view>
            
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue';
import * as mockData from '../../api/mock.js'
import MySearch from '../../conponents/my-search/my-search.vue'; // 组件需要引入才能使用
import { useCartBadge } from '../../mixins/tabbar-badge.js'
  useCartBadge();
  
  // 获取设备可使用窗口高度，单位 px
  const windowHeight = ref(0);
  // 左侧激活项
  const activeIndex = ref(0);
  // 左侧列表--一级分类
  const leftCateList = ref([]);
  // 二级分类
  const secondCateList = ref([]);
  // 三级分类
  const thirdCateList = ref([]);
  // 右侧滚动条的滚动位置
  const scrollTop = ref(0);

  onLoad(() =>{
    // 设备的可用窗口高度 = 总高度 - navigationBar的高度 - tabbar的高度
    windowHeight.value = uni.getSystemInfoSync().windowHeight - 50; // 还要 - 搜索区域的高度
    // 获取左侧列表数据
    getLeftCateList();
  })
  function getLeftCateList() {
    leftCateList.value = mockData.scrollLeftList;
    secondCateList.value = leftCateList.value[0].children;
  }
  function leftItemClick(index) {
    activeIndex.value = index;
    secondCateList.value = leftCateList.value[index].children;
    console.log('二级分类', secondCateList.value);
    // 如果一直设置相同的值,滚动不生效,需要设置不同的值以触发生效。现在的内容太少，在页面上看不出效果
    scrollTop.value = scrollTop.value === 0 ? 1 : 0;
  }
  // 点击三级分类,跳转到商品列表
  function gotoGoodsList(obj) {
    uni.navigateTo({
      url: `/subpkg/goods_list/goods_list?cid=${obj.id}`
    })
  }
  function search() {
    uni.navigateTo({
      url: '/subpkg/search/search'
    })
  }
</script>

<style lang="scss" scoped>
.scroll-container {
  display: flex;
  .left-scroll {
    width: 120px;
    .left-item {
      background-color: #f7f7f7;
      line-height: 60px;
      text-align: center;
      font-size: 12px;
      &.active {
        background-color: #fff;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 3px;
          height: 30px;
          background-color: green;
        }
      }
    }
  }
  .right-scroll {
    .cate-lv2-title {
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 15px 0;
    }
    .cate-lv2-list {
      padding: 0px 10px;
      display: flex;
      flex-wrap: wrap;
      .cate-lv2-item {
        width: 33.3%;
        font-size: 12px;
        margin-bottom: 10px;
        text-align: center;
      }
    }
  }
}
</style>
